import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_common_app/api/get_banner_api.dart';
import 'package:flutter_common_app/api/get_calendar_api.dart';
import 'package:flutter_common_app/api/get_personalized_api.dart';
import 'package:flutter_common_app/data/banner_data.dart';
import 'package:flutter_common_app/data/calendar_data.dart';
import 'package:flutter_common_app/data/dragon_ball_data.dart';
import 'package:flutter_common_app/data/recommend_playlist_data.dart';
import 'package:flutter_common_app/json/dragon_ball_json.dart';
import 'package:flutter_common_app/router/route_util.dart';
import 'package:flutter_common_app/router/routes.dart';
import 'package:flutter_common_app/utils/common_util/timeline_util.dart';
import 'package:flutter_common_app/widgets/custom_image/custom_image.dart';
import 'package:flutter_common_app/widgets/empty_view/h_empty_view.dart';
import 'package:flutter_common_app/widgets/empty_view/v_empty_view.dart';
import 'package:flutter_common_app/widgets/loading_view_wrapper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class DiscoverTab extends StatefulWidget {
  @override
  _DiscoverTabState createState() => _DiscoverTabState();
}

class _DiscoverTabState extends State<DiscoverTab>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  List<DragonBallData> dragonBallDataList =
      DragonBallData.fromJsonList(dragonBallJson['data']);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      backgroundColor: Colors.white,
      body: ListView(
        padding: EdgeInsets.only(bottom: 90.w),
        children: [
          buildBanner(),
          SizedBox(
            width: 750.w,
            height: 200.w,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) {
                return buildDragonBallItem(dragonBallDataList[index]);
              },
              itemCount: dragonBallDataList.length,
              primary: false,
              shrinkWrap: true,
            ),
          ),
          buildViewTitle('推荐歌单', () {}),
          SizedBox(
            height: 360.w,
            child: LoadingViewWrapper(
              GetPersonalizedApi(context)..getParams()['limit'] = 30,
              (context, res) {
                List<RecommendPlaylistData> list =
                    RecommendPlaylistData.fromJsonList(res.data['result']);
                return ListView.builder(
                  padding: EdgeInsets.only(left: 15.w, right: 15.w),
                  itemBuilder: (context, index) {
                    return buildRecommendItem(list[index]);
                  },
                  itemCount: list.length,
                  scrollDirection: Axis.horizontal,
                );
              },
              mapKey: 'result',
            ),
          ),
          buildGrayEmpty(),
          buildCalendar(),
          VEmptyView(100.w),
        ],
      ),
    );
  }

  Widget buildBanner() {
    return SizedBox(
      width: 750.w,
      height: 300.w,
      child: LoadingViewWrapper(
        GetBannerApi(context)..getParams()['type'] = 2,
        (context, res) {
          List<BannerData> list = BannerData.fromJsonList(res.data['banners']);
          return Swiper(
            itemCount: list.length,
            itemBuilder: (BuildContext context, int index) {
              return CustomImage.network(
                list[index].pic ?? '',
                borderRadius: BorderRadius.circular(20.w),
              );
            },
            autoplay: false,
            pagination: SwiperPagination(
              builder: DotSwiperPaginationBuilder(
                color: Color.fromRGBO(200, 200, 200, 0.5),
                size: 8,
                activeSize: 10,
              ),
            ),
            viewportFraction: 0.85,
            scale: 0.9,
          );
        },
        mapKey: 'banners',
      ),
    );
  }

  Widget buildDragonBallItem(DragonBallData dragonBallData) {
    return GestureDetector(
      onTap: () {
        RouteUtil.commonNavigateTo(context, dragonBallData.url);
      },
      behavior: HitTestBehavior.opaque,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 30.w, vertical: 30.w),
        child: Column(
          children: [
            Stack(
              children: [
                Container(
                  width: 90.w,
                  height: 90.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(100.w),
                    border: Border.all(color: Colors.black12, width: 0.5),
                    gradient: RadialGradient(
                      colors: [
                        Color(0xFFFF8174),
                        Colors.red,
                      ],
                      center: Alignment(-1, 0),
                      radius: 1,
                    ),
                    color: Colors.red,
                  ),
                ),
                CustomImage.network(
                  dragonBallData.iconUrl,
                  width: 90.w,
                  height: 90.w,
                ),
              ],
            ),
            SizedBox(height: 10.w),
            Text(
              dragonBallData.name,
              style: TextStyle(color: Colors.black87, fontSize: 24.sp),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildRecommendItem(RecommendPlaylistData recommendPlaylistData) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        RouteUtil.toPlaylistDetailPage(recommendPlaylistData, context);
      },
      child: Container(
        margin: EdgeInsets.fromLTRB(15.w, 30.w, 15.w, 30.w),
        child: Column(
          children: [
            CustomImage.network(
              recommendPlaylistData.picUrl,
              width: 200.w,
              height: 200.w,
              borderRadius: BorderRadius.all(
                Radius.circular(20.w),
              ),
              border: Border.all(color: Colors.black12, width: 0.5),
            ),
            SizedBox(
              height: 5.w,
            ),
            SizedBox(
              width: 200.w,
              child: Text(
                recommendPlaylistData.name,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 24.sp,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildCalendar() {
    return SizedBox(
      child: LoadingViewWrapper(
        GetCalendarApi(context)
          ..getParams()['startTime'] = DateTime.now().millisecondsSinceEpoch,
        (context, res) {
          List<CalendarEventsData> calendarEventsDataList =
              CalendarEventsData.fromJsonList(
                  res.data['data']['calendarEvents']);
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              buildViewTitle('音乐日历', () {
                Routes.navigateTo(context, Routes.songCalendarDetailPage);
              }),
              Container(
                width: 750.w,
                height: 1,
                color: Color(0xF5F5F5FF),
              ),
              ListView.builder(
                shrinkWrap: true,
                primary: false,
                itemBuilder: (context, index) {
                  CalendarEventsData calendarEventsData =
                      calendarEventsDataList[index];
                  return Container(
                    margin: EdgeInsets.only(top: 20.w),
                    padding: EdgeInsets.fromLTRB(30.w, 0, 30.w, 0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        SizedBox(
                          width: 500.w,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                children: [
                                  Text(
                                    TimelineUtil.todayBeforeAndAfter(
                                        calendarEventsData.onlineTime),
                                    style: TextStyle(
                                      color: Colors.black45,
                                      fontSize: 26.sp,
                                    ),
                                  ),
                                  Container(
                                    decoration: BoxDecoration(
                                      color: Color.fromRGBO(252, 247, 232, 1),
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(20.w),
                                      ),
                                    ),
                                    margin: EdgeInsets.only(left: 10.w),
                                    padding:
                                        EdgeInsets.fromLTRB(8.w, 3.w, 8.w, 3.w),
                                    child: Text(
                                      calendarEventsData.tag,
                                      style: TextStyle(
                                        color: Color.fromRGBO(236, 182, 72, 1),
                                        fontSize: 22.sp,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Text(
                                calendarEventsData.title,
                                style: TextStyle(
                                  fontSize: 30.sp,
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ],
                          ),
                        ),
                        CustomImage.network(
                          calendarEventsData.imgUrl,
                          width: 120.w,
                          height: 120.w,
                          borderRadius: BorderRadius.all(
                            Radius.circular(20.w),
                          ),
                        ),
                      ],
                    ),
                  );
                },
                itemCount: calendarEventsDataList.length,
              ),
            ],
          );
        },
      ),
    );
  }

  Widget buildViewTitle(String text, Function moreClick) {
    return Container(
      padding: EdgeInsets.fromLTRB(30.w, 20.w, 30.w, 10.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            text,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.black87,
              fontSize: 30.sp,
            ),
          ),
          GestureDetector(
            onTap: () {
              moreClick();
            },
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 18.w, vertical: 3.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(100.w),
                ),
                border: Border.all(color: Colors.black26, width: 1.w),
              ),
              child: Row(
                children: [
                  Text(
                    '更多',
                    style: TextStyle(
                      color: Colors.black87,
                      fontSize: 24.sp,
                    ),
                  ),
                  HEmptyView(3.w),
                  Image.asset(
                    'images/keyboard_arrow_right.png',
                    width: 10.w,
                    color: Colors.black87,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildGrayEmpty() {
    return Container(
      height: 20.w,
      width: 750.w,
      color: Color(0xF5F5F5FF),
    );
  }
}
